<template>
  <view class="upgraded-page">
    <!-- 导航栏 -->
    <up-navbar title="合伙人" :safeAreaInsetTop="true" :autoBack="true" leftIconColor="#333" titleColor="#333" bgColor="#fff" placeholder></up-navbar>

    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="user-avatar">
          <image src="/static/logo2.png" class="avatar-icon" mode="aspectFit"></image>
        </view>
        <view class="user-details">
          <view class="user-level">营销经理</view>
          <view class="next-level">下一等级: 高级合伙人</view>
        </view>
        <!-- 升级按钮 -->
        <view class="upgrade-btn" @click="handleUpgrade">
          <text>升级</text>
        </view>
      </view>
      <!-- 进度条 -->
      <view class="progress-section">
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressWidth + '%' }"></view>
        </view>
        <view class="progress-text">
          您当前需购入
          <text class="highlight">10000NKS</text>
          即可升级为
          <text class="highlight">高级合伙人</text>
        </view>
      </view>
    </view>

    <!-- 分红池卡片 -->
    <view class="dividend-pool-card">
      <view class="card-header">
        <view class="card-title">分红池</view>
        <view class="update-info">(分红池最新数据每小时更新)</view>
      </view>

      <view class="pool-stats">
        <view class="stat-item">
          <view class="stat-label">总额(USDT)</view>
          <view class="stat-value">347.6363</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">今日分红池新增金额(USDT)</view>
          <view class="stat-value">0.2854</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">昨日分红总额(USDT)</view>
          <view class="stat-value">15.2255</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">今日预计分红总额(USDT)</view>
          <view class="stat-value">11.2588</view>
        </view>
      </view>
    </view>

    <!-- 累计分红卡片 -->
    <view class="accumulated-card">
      <view class="card-title">累计分红</view>

      <view class="dividend-stats">
        <view class="stat-item">
          <view class="stat-label">持有NKS数量(USDT)</view>
          <view class="stat-value">347.6363</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">累计分红池分红金额(USDT)</view>
          <view class="stat-value">0.2854</view>
        </view>
      </view>
    </view>

    <!-- 分红池分红明细 -->
    <view class="dividend-details-card">
      <view class="card-header">
        <view class="card-title">分红池分红明细</view>
        <view class="date-selector" @click="showDatePicker">
          <text>2025-09</text>
          <u-icon name="arrow-down" size="16" color="#666"></u-icon>
        </view>
      </view>

      <!-- 时间筛选标签 -->
      <view class="time-tabs">
        <view class="tab-item" :class="{ active: activeTab === '7days' }" @click="switchTab('7days')">最近7天</view>
        <view class="tab-item" :class="{ active: activeTab === '30days' }" @click="switchTab('30days')">最近30天</view>
        <view class="tab-item" :class="{ active: activeTab === '90days' }" @click="switchTab('90days')">最近90天</view>
      </view>

      <!-- 数据内容区域 -->
      <view class="data-content">
        <view class="empty-state">
          <image src="/static/images/empty-data.png" class="empty-icon" mode="aspectFit"></image>
          <text class="empty-text">暂无数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UpgradedPartner',
  data() {
    return {
      activeTab: '7days',
      progressWidth: 65 // 进度条宽度百分比
    };
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab;
      // 这里可以添加获取对应数据的逻辑
      console.log('切换到:', tab);
    },
    showDatePicker() {
      // 这里可以添加日期选择器的逻辑
      console.log('显示日期选择器');
    },
    handleUpgrade() {
      // 升级按钮点击事件
      uni.showToast({
        title: '升级功能开发中',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.upgraded-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-card {
  margin: 30rpx;
  background-color: #333;
  border-radius: 16rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .user-avatar {
      width: 80rpx;
      height: 80rpx;
      margin-right: 24rpx;

      .avatar-icon {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .user-details {
      flex: 1;
      .user-level {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8rpx;
      }

      .next-level {
        font-size: 26rpx;
        color: #ccc;
      }
    }
  }

  .progress-section {
    .progress-bar {
      width: 100%;
      height: 8rpx;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 4rpx;
      overflow: hidden;
      margin-bottom: 16rpx;

      .progress-fill {
        height: 100%;
        background-color: #12c284;
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }

    .progress-text {
      font-size: 24rpx;
      color: #ccc;
      text-align: left;

      .highlight {
        color: #12c284;
        font-weight: 600;
      }
    }
  }

  .upgrade-btn {
    background-color: #fff;
    color: #333;
    padding: 12rpx 24rpx;
    border-radius: 50rpx;
    font-size: 24rpx;
    border: 1rpx solid #e0e0e0;
    display: inline-block;
    min-width: 120rpx;
    text-align: center;
    align-self: center;
  }
}

.dividend-pool-card,
.accumulated-card,
.dividend-details-card {
  margin: 0 30rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;

  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .update-info {
    font-size: 24rpx;
    color: #999;
  }

  .date-selector {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 28rpx;

    text {
      margin-right: 8rpx;
    }
  }
}

.pool-stats,
.dividend-stats {
  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .stat-label {
      font-size: 28rpx;
      color: #666;
      flex: 1;
    }

    .stat-value {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
    }
  }
}

.time-tabs {
  display: flex;
  margin-bottom: 30rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    font-size: 26rpx;
    color: #666;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    margin-right: 16rpx;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      background-color: #12c284;
      color: #fff;
    }
  }
}

.data-content {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;

    .empty-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 24rpx;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>
